<template>
  <div class="deliverySetting">
    <!-- <el-calendar v-model="value" style="width: 50%"/> -->
    <div class="topBar">
      <div class="whichDate">{{ toMonth }}月{{ toDate }}日</div>
      <div class="whichYear">
        <span>{{ toYear }}年</span>
        <br>
        <span>{{ week }}</span>
      </div>
      <div class="but">
        <el-button type="text" @click="inaMonth">上一个月</el-button>
        <el-button type="text" @click="nextMonth">下一个月</el-button>
      </div>
      <div class="nongliDetail">
        {{ nongliDetail }}
      </div>
    </div>

    <div class="monthBox">
      <div class="weekDay">
        <div class="week">日</div>
        <div class="week">一</div>
        <div class="week">二</div>
        <div class="week">三</div>
        <div class="week">四</div>
        <div class="week">五</div>
        <div class="week">六</div>
      </div>
      <div class="monthDay">
        <div v-for="(item, i) in MonthDayArray" :key="i" class="tr">
          <div v-for="(name, index) in item" :key="index" :id="name.num" :class="[name.isShowDayInfo ? 'showDayInfo' : 'hideDayInfo', name.isToday ? 'today' : '']" class="day" @click="showDate(name)">
            <div v-if="name.num !== 0" class="gongli">{{ name.num }}</div>
            <div v-if="name.num !== 0" class="nongli">{{ name.nongli }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      MonthDayArray: [],
      monthNum: new Date().getMonth() + 1,
      yearNum: new Date().getFullYear(),
      value: new Date(),
      toDate: new Date().getDate(),
      toMonth: new Date().getMonth() + 1,
      toYear: new Date().getFullYear(),
      week: '星期一',
      nongliDetail: '',
      // 阴历
      cYear: null,
      cMonth: null,
      cDay: null,
      wDay: null,
      TheDate: null,
      tgString: '甲乙丙丁戊己庚辛壬癸',
      dzString: '子丑寅卯辰巳午未申酉戌亥',
      numString: '一二三四五六七八九十',
      monString: '正二三四五六七八九十冬腊',
      weekString: '日一二三四五六',
      sx: '鼠牛虎兔龙蛇马羊猴鸡狗猪',
      CalendarData: [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95],
      madd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334]
    }
  },
  created() {
    // 显示具体日期
    this.calcMonthDayArray()
    // 获得周
    this.GetWeek(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())
    this.GetcWeekString()
    // 获得阴历
    this.e2c()
    this.GetcDateString()
  },
  methods: {
    // 上一个月
    inaMonth() {
      const self = this
      self.lastMontn()
      // console.log(self.MonthDayArray)
      self.showDate()
    },
    lastMontn() {
      const self = this
      const n = self.monthNum
      const y = self.yearNum
      if (n === 1) {
        self.monthNum = 12
        self.yearNum = y - 1
      } else {
        self.monthNum = n - 1
      }
      self.calcMonthDayArray()
    },
    // 下一个月
    nextMonth() {
      const self = this
      self.nextMonth_fn()
      self.showDate()
    },
    nextMonth_fn() {
      const self = this
      const n = self.monthNum
      const y = self.yearNum
      if (n === 12) {
        self.monthNum = 1
        self.yearNum = y + 1
      } else {
        self.monthNum = n + 1
      }
      self.calcMonthDayArray()
    },
    // 显示具体日期开始
    calcMonthDayArray() {
      const self = this
      const t = new Date()
      const dateArray = self.paintCalendarArray(self.monthNum, self.yearNum)
      // 如果不是当年当月，自动选择1号这一天
      const notToday = (self.monthNum !== t.getMonth() + 1 || self.yearNum !== t.getFullYear())
      if (notToday) {
        for (var i = 0; i < dateArray[0].length; i++) {
          if (dateArray[0][i].num === 1) {
            dateArray[0][i].isShowDayInfo = true
          }
        }
      }
      self.MonthDayArray = dateArray
      self.toYear = notToday ? self.yearNum : t.getFullYear()
      self.toMonth = notToday ? self.monthNum : t.getMonth() + 1
      self.toDate = notToday ? 1 : t.getDate()
      self.nongliDetail = notToday ? self.GetLunarDay(self.yearNum, self.monthNum, 1) : self.GetLunarDay(t.getFullYear(), t.getMonth() + 1, t.getDate())
      self.week = notToday ? self.GetWeek(self.yearNum, self.monthNum, 1) : self.GetWeek(t.getFullYear(), t.getMonth() + 1, t.getDate())
    },
    getMonthFirstDay(m, y) {
      const t = new Date()
      t.setFullYear(y)
      t.setMonth(m)
      t.setDate(1)
      return t.getDay()
    },
    getMonthTotalDate(m, y) {
      const t = new Date()
      t.setFullYear(y)
      t.setMonth(m)
      t.setDate(0)
      return t.getDate()
    },
    GetLunarDay(solarYear, solarMonth, solarDay) {
      const self = this
      if (solarYear < 1921) {
        return ''
      } else {
        solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11
        self.e2c(solarYear, solarMonth, solarDay)
        return self.GetcDateString()
      }
    },
    paintCalendarArray(m, y) {
      const self = this
      const t = new Date()
      const nSpace = self.getMonthFirstDay(m - 1, y)
      const totalDate = self.getMonthTotalDate(m, y)
      const ret = []
      let trArray = []
      for (var i = 1; ; i++) {
        if (i <= nSpace) {
          trArray.push('')
        } else if (i <= totalDate + nSpace) {
          var nl = self.GetLunarDay(y, m, i - nSpace)
          trArray.push({
            num: i - nSpace,
            isShowDayInfo: (m === t.getMonth() + 1 && i - nSpace === t.getDate() && y === t.getFullYear()),
            nongli: nl.slice(nl.length - 2),
            nongliInfo: self.GetLunarDay(y, m, i - nSpace),
            isToday: (m === t.getMonth() + 1 && i - nSpace === t.getDate() && y === t.getFullYear())
          })
        } else {
          const l = trArray.length
          for (var j = 0; j + l < 7; j++) {
            trArray.push('')
          }
          ret.push(trArray)
          break
        }
        if (trArray.length === 7) {
          ret.push(trArray)
          trArray = []
        }
      }
      return ret
    },
    // 显示具体日期结束
    // 点击日历显示
    showDate(date) {
      const self = this
      var eId
      if (date) {
        eId = date.num
      } else {
        eId = Number(self.toDate)
      }
      var MonArray = self.MonthDayArray
      if (eId === '') return
      // 点击效果
      for (var i = 0; i < MonArray.length; i++) {
        for (var j = 0; j < MonArray[i].length; j++) {
          if (typeof (MonArray[i][j]) === 'string') {
            continue
          }
          if (MonArray[i][j].num === eId) {
            MonArray[i][j].isShowDayInfo = !MonArray[i][j].isShowDayInfo
          }
        }
      }
      for (var p = 0; p < MonArray.length; p++) {
        for (var q = 0; q < MonArray[p].length; q++) {
          if (typeof (MonArray[p][q]) === 'string' || MonArray[p][q].num === eId) {
            continue
          }
          MonArray[p][q].isShowDayInfo = false
        }
      }
      // 如果不是当月选择1号
      var notToday = (self.monthNum !== new Date().getMonth() + 1 || self.yearNum !== new Date().getFullYear())
      if (notToday) {
        for (var k = 0; k < MonArray[0].length; k++) {
          if (MonArray[0][k].num === 1) {
            MonArray[0][k].isShowDayInfo = true
          }
        }
      }
      self.MonthDayArray = MonArray
      self.toYear = self.yearNum
      self.toMonth = self.monthNum
      self.toDate = eId
      // self.nongliDetail = date.nongliInfo
      self.nongliDetail = self.GetLunarDay(self.yearNum, self.monthNum, eId)
      self.week = self.GetWeek(self.yearNum, self.monthNum, eId)
    },
    // 获得周-------------------
    GetWeek(solarYear, solarMonth, solarDay) {
      const self = this
      const date = solarYear + '/' + solarMonth + '/' + solarDay
      const week = new Date(date)
      self.cDay = week.getDay()
      return self.GetcWeekString()
    },
    GetcWeekString() {
      const self = this
      let week = ''
      switch (self.cDay) {
        case 0:
          week += '星期日'
          break
        case 1:
          week += '星期一'
          break
        case 2:
          week += '星期二'
          break
        case 3:
          week += '星期三'
          break
        case 4:
          week += '星期四'
          break
        case 5:
          week += '星期五'
          break
        case 6:
          week += '星期六'
          break
      }
      self.week = week
      return week
    },
    // 获得周-------------------
    // 获得阴历-------------------
    GetBit(m, n) {
      return (m >> n) & 1
    },
    e2c() {
      const self = this
      self.TheDate = (arguments.length !== 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2])
      let total, m, n, k
      var isEnd = false
      let tmp = self.TheDate.getYear()
      if (tmp < 1900) {
        tmp += 1900
      }
      total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + self.madd[self.TheDate.getMonth()] + self.TheDate.getDate() - 38
      if (self.TheDate.getFullYear() % 4 === 0 && self.TheDate.getMonth() > 1) {
        total++
      }
      for (m = 0; ; m++) {
        k = (self.CalendarData[m] < 0xfff) ? 11 : 12
        for (n = k; n >= 0; n--) {
          if (total <= 29 + self.GetBit(self.CalendarData[m], n)) {
            isEnd = true
            break
          }
          total = total - 29 - self.GetBit(self.CalendarData[m], n)
        }
        if (isEnd) break
      }
      self.cYear = 1921 + m
      self.cMonth = k - n + 1
      self.cDay = total
      if (k === 12) {
        if (self.cMonth === Math.floor(self.CalendarData[m] / 0x10000) + 1) {
          self.cMonth = 1 - self.cMonth
        }
        if (self.cMonth > Math.floor(self.CalendarData[m] / 0x10000) + 1) {
          self.cMonth--
        }
      }
    },
    GetcDateString() {
      const self = this
      let tmp = ''
      tmp += self.tgString.charAt((self.cYear - 4) % 10)
      tmp += self.dzString.charAt((self.cYear - 4) % 12)
      tmp += '('
      tmp += self.sx.charAt((self.cYear - 4) % 12)
      tmp += ')年 '
      if (self.cMonth < 1) {
        tmp += '(闰)'
        tmp += self.monString.charAt(-self.cMonth - 1)
      } else {
        tmp += self.monString.charAt(self.cMonth - 1)
      }
      tmp += '月'
      tmp += (self.cDay < 11) ? '初' : ((self.cDay < 20) ? '十' : ((self.cDay < 30) ? '廿' : '三十'))
      if (self.cDay % 10 !== 0 || self.cDay === 10) {
        tmp += self.numString.charAt((self.cDay - 1) % 10)
      }
      self.nongliDetail = tmp
      return tmp
    }
    // 获得阴历-------------------
  }
}
</script>

<style scoped>
.deliverySetting {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
  height: 80vh;
}
.deliverySetting >>> .el-button--text {
  color: #fff;
  font-size: 20px;
}
.topBar {
  position: relative;
  background-color: rgb(64, 158, 255);
  width: 100%;
  color: white;
  font-family: '微软雅黑';
  font-weight: 200;
}
.topBar .whichDate {
  display: inline-block;
  padding: 10px 0px 10px 20px;
  font-size: 40px;
}
.topBar .whichYear {
  display: inline-block;
  vertical-align: top;
  padding-top: 15px;
  font-size: 18px;
}
.topBar .nongliDetail {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.topBar .but {
  position: absolute;
  bottom: 10px;
  right: 50%;
  color: #fff;
  transform: translateX(50%);
}
.monthBox {
  width: 100%;
  padding: 0 2%;
}
.weekDay {
  display: flex;
  justify-content: space-around;
  flex-grow: 1;
}
.weekDay .week {
  display: flex;
  margin-top: 10px;
  justify-content: center;
  font-family:'微软雅黑';
  font-weight: 200;
}
.monthDay {
  width: 100%;
}
.monthDay .tr {
  width: 100%;
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}
.monthDay .tr .day{
  display: block;
  width: 100px;
  height: 66px;
  padding-top: 10px;
  border-radius: 5px;
  text-align: center;
  color: #999;
  border: 1px solid white;
  cursor: pointer;
}
.monthDay .tr .day.hideDayInfo {
  border: 1px solid white;
}
.monthDay .tr .day.showDayInfo {
  border:1px solid rgb(64, 158, 255);
}
.monthDay .tr .today {
  background-color: rgb(64, 158, 255);
  color:white;
}
.monthDay .tr .day .gongli {
  display: block;
  font-family:Arial, Helvetica, sans-serif;
  width: 100px;
  font-size: 18px;
}
.monthDay .tr .day .nongli {
  display: block;
  font-family: "微软雅黑";
  font-weight: 200;
  font-size: 18px;
  text-align: center;
  width: 100px;
}
.click_next {
  margin-bottom: 50px;
  display: flex;
  justify-content: space-around;
}
.right_arrow {
  width: 30px;
  height: 30px;
}
.scheduling {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.schedulingName {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>
